<template>
  <div class="common-warp wh100 warp-bg">
    <Search @onSearch="handleSearch" :searchOptions="state.data.searchOptions" @change="handleChange" />
    <Table v-bind="state.data" @onEdit="handleEdit" @onDel="handleDel" />
    <Add @add="handleAdd" />
    <DelDialog ref="delDialogRef" @del="handleDialogDel" />
  </div>
</template>

<script lang='ts' setup>
import '@/theme/index.less';
import { ref, reactive, onMounted } from 'vue';
import Search from '@/components/search/index.vue';
import Add from '@/components/add/index.vue';
import Table from '@/components/table/index.vue';
import DelDialog from '@/components/delDialog/index.vue';
import { useRoute, useRouter } from 'vue-router'


import { usePersonOrganizationDeleteApi, usePersonOrganizationPageApi } from '@/api';
import { message } from 'ant-design-vue';
import type { OrganizationItem } from '@/types/person/organization';
const delDialogRef = ref();
const router = useRouter()
const route = useRoute()

const state = reactive({
  data: {
    // 列表数据（必传）
    list: [] as any[],
    header: [
      //开启表格序号
      // {
      //   title: "序号",
      //   key: "key",
      //   align: "center",
      //   customRender: ({ index }) => `${index + 1}`,
      // },
      { dataIndex: 'name', title: '名称', ellipsis: true, align: 'center' },
      {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        width: 80
      },//开启表格操作
    ],
    // 配置项（必传） 
    config: {
      rowkey: 'code',     // antDesign使用rowKey来指定数据列的主键,与删除回传key保持一致
      total: 0,           // 列表总数
      loading: false,     // loading加载
      isBorder: true,     // 是否显示表格边框
      isSelection: false,  // 是否显示表格多选
      page: true,

      bottomBtn: false,
      haveEdit: true,
      haveDel: true
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [
      { label: '名称', value: 'name' }
    ],
  },
});

function formatTree(data: OrganizationItem[], parentCode: string) {
  let result = [] as any[];
  data.forEach((item: OrganizationItem) => {
    if (item.parentCode === parentCode) {
      let children = formatTree(data, item.code)
      if (children.length === 0) {
        children = null
      }
      item.children = children
      result.push(item)
    }
  });
  return result;
}

const getData = async () => {
  let { data: { pageNum, pageSize, total, list } } = await usePersonOrganizationPageApi(state.data.params)
  list || []
  state.data.list = formatTree(list, '');
  state.data.params.pageSize = pageSize
  state.data.params.pageNum = pageNum
  state.data.config.total = total
}

onMounted(() => {
  document.title = '部门管理';
  getData()
})

// 新增设备
const handleAdd = () => {
  router.push({ name: 'AddPersonOrganization' })
}

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any
  conditions[selectValue] = inputValue
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData()
}
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  }
}

const handleEdit = ({ code, name, parentCode }: OrganizationItem) => {
  router.push({
    name: "EditPersonOrganization",
    query: {
      code, name, parentCode
    }
  })
}

// 打开删除弹窗
const handleDel = (row: OrganizationItem) => {
  delDialogRef.value.openDialog(row)
}
// 确认删除
const handleDialogDel = async ({ code }: OrganizationItem) => {
  await usePersonOrganizationDeleteApi({ code })
  message.success("操作成功", 2);
  getData()
}

</script>
<style scoped lang='less'>
.box {
  color: var(--aaa);
  width: 750px;
  height: 50px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.no {
  width: 200px;
  height: 50px;
  background-color: bisque;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
</style>